fix(pdf): Improve printable event form#316
Conversation
ToivoMattilaHelsinki
changed the title
|
PUISTOTALKOOT-UI branch is deployed to platta: https://puistotalkoot-pr316-ui.dev.hel.ninja 🚀🚀🚀 |
e2e tests result is success for https://puistotalkoot-pr316-ui.dev.hel.ninja 😆🎉🎉🎉 |
|
PUISTOTALKOOT-UI branch is deployed to platta: https://puistotalkoot-pr316-ui.dev.hel.ninja 🚀🚀🚀 |
e2e tests result is success for https://puistotalkoot-pr316-ui.dev.hel.ninja 😆🎉🎉🎉 |
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
📝 WalkthroughWalkthroughAdds print-oriented markup and classes to EventForm, renders compact print summaries in DateRange and Location, introduces tests for printable output, and tightens print.scss to normalize layout and spacing for PDF/print rendering. ChangesEvent form print layout improvements
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install timed out. The project may have too many dependencies for the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Improve browser print and Save as PDF for the volunteer event form (EventPage). Hide the three section subtitle blocks in print while they remain visible on screen. Tweak padding and form-row font size. Refs: PS-275
Use Prettier to format DateRange file Refs: PS-275
ToivoMattilaHelsinki
force-pushed
the
PS-275-printable-event-form
branch
from
6f983ba to
57794f3
Compare
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
Refs: PS-275
Refs: PS-275
Refs: PS-275
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/form/EventForm.tsx`:
- Around line 283-289: Guard the use of values.additional_information before
calling .trim() in EventForm.tsx to avoid crashes when it's undefined: change
the conditional that builds the Row className to base the check on a safe string
(e.g., use a nullish default or optional chaining) so you call .trim() on
(values.additional_information ?? '') or use
values.additional_information?.trim() when deciding whether to apply
'event-form-print-note--empty'; update the className logic that references
values.additional_information to use that guarded expression.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: aa311a2d-8b81-4a69-b5aa-aef1f74805f5
📒 Files selected for processing (7)
src/components/form/EventForm.tsxsrc/components/form/__tests__/EventForm.test.tsxsrc/components/form/partitions/DateRange.tsxsrc/components/form/partitions/Location.tsxsrc/components/form/partitions/__tests__/DateRange.test.tsxsrc/components/form/partitions/__tests__/Location.test.tsxsrc/components/pages/events/print.scss
🚧 Files skipped from review as they are similar to previous changes (6)
- src/components/form/tests/EventForm.test.tsx
- src/components/form/partitions/Location.tsx
- src/components/form/partitions/tests/Location.test.tsx
- src/components/form/partitions/tests/DateRange.test.tsx
- src/components/form/partitions/DateRange.tsx
- src/components/pages/events/print.scss
|
PUISTOTALKOOT-UI branch is deployed to platta: https://puistotalkoot-pr316-ui.dev.hel.ninja 🚀🚀🚀 |
e2e tests result is success for https://puistotalkoot-pr316-ui.dev.hel.ninja 😆🎉🎉🎉 |
| <p className="print-only"> | ||
| {formatMessage({ | ||
| id: 'form.event.field.trash_location.placeholder', | ||
| })} | ||
| </p> |
There was a problem hiding this comment.
Bug: The print-only paragraph in the Location component renders a static placeholder label instead of the actual user-entered values.maintenance_location.
Severity: MEDIUM
Suggested Fix
Replace the static placeholder in the print-only paragraph with the actual value from the form state. Use the PrintValue component with values.maintenance_location as the value prop, similar to how other input components handle print rendering. This will ensure the user's input is displayed on the printed form.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location: src/components/form/partitions/Location.tsx#L172-L176
Potential issue: The `Location` component's print-only view, intended for the printable
PDF version of the form, incorrectly displays a static placeholder label. It should
instead render the actual value entered by the user, which is stored in
`values.maintenance_location`. This is inconsistent with how other form fields like
`DateRange` are handled in the same pull request, which correctly display the user's
input in the print view. As a result, any information entered into the maintenance
location field will be missing from the printed document.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/components/form/EventForm.tsx (1)
283-283:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRestore the missing
event-form-print-noteclassName with proper guarding.The
Rowat line 283 is missing theevent-form-print-noteclassName that the tests expect and the print CSS relies on. The past review flagged a crash onvalues.additional_information.trim()when the field is undefined, but the fix should guard the.trim()call—not remove the className entirely.Without this className:
- Tests fail (they assert
.event-form-print-noteand.event-form-print-note--emptyexist)- Print layout breaks (CSS at
print.scss:170-180expects these classes to control spacing and visibility)🛡️ Proposed fix
- <Row> + <Row + className={`event-form-print-note ${ + (values.additional_information ?? '').trim() + ? '' + : 'event-form-print-note--empty' + }`} + >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/form/EventForm.tsx` at line 283, Restore the missing "event-form-print-note" className on the Row in the EventForm component and guard the trim call so it never crashes when additional_information is undefined: add back className="event-form-print-note" (and preserve logic for the modifier class "event-form-print-note--empty") and change uses of values.additional_information.trim() to a safe expression such as (values.additional_information || "").trim() or check for undefined before calling trim; update the element rendering logic in EventForm to compute emptiness via that safe expression so tests and print.scss expectations are satisfied.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Duplicate comments:
In `@src/components/form/EventForm.tsx`:
- Line 283: Restore the missing "event-form-print-note" className on the Row in
the EventForm component and guard the trim call so it never crashes when
additional_information is undefined: add back className="event-form-print-note"
(and preserve logic for the modifier class "event-form-print-note--empty") and
change uses of values.additional_information.trim() to a safe expression such as
(values.additional_information || "").trim() or check for undefined before
calling trim; update the element rendering logic in EventForm to compute
emptiness via that safe expression so tests and print.scss expectations are
satisfied.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c4b50fc0-6080-4d5e-9b30-df0e22afd3ea
📒 Files selected for processing (1)
src/components/form/EventForm.tsx
|
PUISTOTALKOOT-UI branch is deployed to platta: https://puistotalkoot-pr316-ui.dev.hel.ninja 🚀🚀🚀 |
e2e tests result is success for https://puistotalkoot-pr316-ui.dev.hel.ninja 😆🎉🎉🎉 |
Refs: PS-275
|
|
PUISTOTALKOOT-UI branch is deployed to platta: https://puistotalkoot-pr316-ui.dev.hel.ninja 🚀🚀🚀 |
e2e tests result is success for https://puistotalkoot-pr316-ui.dev.hel.ninja 😆🎉🎉🎉 |
3 participants
Description
Refs: PS-275
This PR improves the printable PDF version of the event form.
It cleans up the print layout, aligns rows more consistently, and removes screen-only helper text that is not useful in the contractor-facing PDF. It also adds print-only rendering for date and time values so the PDF shows the actual event schedule even when the interactive fields are hidden.
What changed
Added print-only values for event start/end date and time in DateRange
Wrapped DateRange in a print-visible container so those values render in the PDF
Tightened print CSS so form rows align consistently across responsive column layouts
Hid non-essential helper copy and optional content from the printed form
Added regression coverage for the print-specific date/time rendering
Notes
This is limited to the printable PDF path.
Normal form behavior and submission flow are unchanged.
New PDF
Attached is an image of what the PDF looks now
Summary by CodeRabbit
New Features
Tests